<template>
  <div class="title">
    <a class="icon" @click="backLastPage">
      <h3 class="here">{{ titleText }}</h3>
      <h3 class="toNav">BACK</h3>
    </a>
  </div>
</template>

<script>
export default {
  name: "ComponentTitle",
  data(){
    return{
      titleText:"",
    }
  },
  mounted() {
    this.titleText = this.$route.meta.titleText;
    this.changeTitleWidth();
    this.changeTitleColor();
  },
  methods:{
    changeTitleWidth(){
      //根据meta修改title宽度。
      if (this.$route.meta.changeTitleWidth){
        let title = document.getElementsByClassName("title")[0];
        title.style.width = this.$route.meta.changeTitleWidth;
      }
    },
    changeTitleColor(){
      //根据meta修改title颜色。
      if (this.$route.meta.changeTitleColor){
        let title = document.getElementsByClassName("icon")[0];
        title.style.background = this.$route.meta.changeTitleColor;
      }
    },
    backLastPage(){
      this.$router.back();
    }
  },
  watch:{
    $route(to,from){
      this.titleText = this.$route.meta.titleText;
      this.changeTitleWidth();
      this.changeTitleColor();
    }

  },
}
</script>

<style scoped lang="less">
.title{
  margin: 20px auto;
  position: relative;
  width: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
  min-height: 70px;
  font-size: 24px;
  cursor: pointer;

  &:hover{
    .icon{
      top: 10%;
      left: 2%;
      width: 96%;
      height: 80%;
      color: #fff;

      .here{
        display: none;
      }
      .toNav{
        display: block;
      }
    }
  }

  .icon{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #4eb7ff;
    transition: 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;

    .toNav{
      display: none;
    }
  }
}
</style>